<template>
  <div>
    <div class="continer">
      <div class="search-box">
        <a href="#" class="iconfont icon-zuojiantou black" @click="Back"></a>
        <div class="search">
          <i class="iconfont icon-fangdajing fdj"></i>
          <input type="text" placeholder="尖椒" @focus="Search" />
        </div>
      </div>

      <div class="shop">
        <div class="big_picbox">
          <img :src="shopModel.img" />
        </div>
        <div class="content">
          <h5 class="shopname">{{ shopModel.name }}</h5>
          <p class="sale">
            <span>月销售{{ shopModel.sale }}万+</span
            ><span class="spec">起送¥{{ shopModel.startprice }}</span
            ><span>基础运费¥{{ shopModel.baseprice }}</span>
          </p>
          <p class="vip">{{ shopModel.yhtext }}</p>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="side-menu">
        <ul>
          <li
            :class="cateIndex == index ? 'active' : ''"
            @click="TabCate(index)"
            v-for="(item, index) in cateList"
            :key="index"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="product-list">
        <div class="shopinfo" v-for="(item, index) in cartList" :key="index">
          <div class="picbox">
            <img :src="item.img" />
          </div>
          <div class="content">
            <h4 class="shop_name">{{ item.name }}</h4>
            <p class="sale">月售{{ item.sale }}件</p>
            <p class="price">
              ¥{{ item.price }}
              <del v-if="item.oldprice > 0">¥{{ item.oldprice }}</del>
            </p>
            <p class="count">
              <span class="sub" @click="Sub(item.id)">-</span>
              <span class="number">{{
                item.number > 0 ? item.number : 0
              }}</span>
              <span class="add" @click="Add(item.id)">+</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <cart :isShowCart="isShowCart" :shopId="shopId" :shopName="shopModel.name">
    </cart>
  </div>
</template>
<script>
import Cart from "./components/Cart.vue";
import { get } from "../../utils/requerst";

export default {
  name: "Shop",

  computed: {
    cartList() {
      let index = this.$store.state.shop.cartList.findIndex((item) => {
        return item.shopId == this.shopId;
      });

      if (index == -1) return [];
      this.listData = this.$store.state.shop.cartList[index].items;
      return this.listData;
    },
  },
  components: { Cart },
  created() {
    this.GetShopInfo();
    // let index = this.$store.state.shop.shopList.findIndex((item) => {
    //   return item.id == this.shopId;
    // })
    // console.log(index);
    // if (index == -1) return [];
    // this.shopModel = this.$store.state.shop.shopList[index];

    //

    let cartModel = this.$store.state.shop.cartList.find((item) => {
      return item.shopId == this.shopId;
    });
    if (cartModel != undefined) this.listData = cartModel.items;

    //this.shopId = this.$route.query.id;
  },
  data() {
    return {
      shopModel: {},
      isShowCart: false,
      shopId: this.$route.query.shopId,
      cateIndex: 0,
      listData: [],
      cateList: this.$store.state.shop.cateList,
    };
  },
  methods: {
    async GetShopInfo() {
      let { status, message, data } = await get("/api/shop/get"
          ,{shopId:this.shopId});
      
      if (status) {
        this.shopModel = data;
      } else {
        alert(message);
      }
    },
    setCart() {
      this.$store.commit("shop/setCartList", {
        list: this.listData,
        shopId: this.shopId,
      });
    },

    Sub(id) {
      let index = this.listData.findIndex((it) => {
        return it.id == id;
      });
      if (index > -1) {
        if (this.listData[index].number > 0) this.cartList[index].number -= 1;
        if (this.listData[index].number == 0) {
          this.listData[index].ischeck = false;
        }
        this.setCart(id);
      }
    },
    Add(id) {
      let index = this.listData.findIndex((it) => {
        return it.id == id;
      });

      if (index > -1) {
        this.listData[index].number += 1;
        this.listData[index].ischeck = true;

        this.setCart(id);
      }
    },
    TabCate(index) {
      this.cateIndex = index;
    },
    Back() {
      this.$router.go(-1);
    },
    Search() {
      this.$router.push({ name: "Search" });
    },
  },
};
</script>
<style lang="scss" scoped>
.continer {
  padding: 0 18px;
  .search-box {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;

    .search {
      flex: 1;
      display: flex;
      background: #f5f5f5;
      border-radius: 16px;
      height: 32px;
      position: relative;
      .fdj {
        position: absolute;
        left: 16px;
        top: 8px;
      }
      input {
        border-radius: 16px;
        width: 100%;
        border: none;
        outline: none;
        background: #f5f5f5;
        border: none;
        margin-left: 38px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #b7b7b7;
        line-height: 16px;
      }
    }
    .black {
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #333333;
      line-height: 32px;
      margin-right: 16.5px;
    }
  }
  .shop {
    margin-top: 24px;
    display: flex;
    .big_picbox {
      width: 56px;
      height: 56px;
      margin-right: 16px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .content {
      //border-bottom: 1px solid #f1f1f1;
      font-family: PingFangSC-Regular;
      font-size: 13px;
      color: #333333;
      flex: 1;
      .shopname {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #333333;
      }
      .sale {
        margin: 8px 0px;
        .spec {
          margin: 0 16px;
        }
      }
      .vip {
        color: red;
        margin-bottom: 4px;
      }
    }
  }
}

.main {
  margin-top: 12px;
  display: flex;
  position: absolute;
  top: 140px;
  bottom: 0;
  right: 0;
  left: 0;
  .side-menu {
    width: 76px;
    margin-right: 16px;
    height: auto;
    background: #f5f5f5;

    ul {
      li {
        height: 40px;
        line-height: 40px;
        border-radius: 2px;
        text-align: center;
      }
      .active {
        background: white;
      }
    }
  }
  .product-list {
    margin-bottom: 49px;
    flex: 1;

    .shopinfo {
      padding: 12px 0px;
      margin-right: 18px;
      border-bottom: 1px solid #f1f1f1;
      display: flex;
      .picbox {
        width: 68px;
        height: 68px;
        margin-right: 16px;

        img {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        position: relative;
        flex: 1;
        .shop_name {
          font-family: PingFangSC-Medium;
          font-size: 14px;
          color: #333333;
          font-weight: bold;
        }
        .sale {
          margin-top: 8px;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #333333;
          line-height: 16px;
        }
        .price {
          margin-top: 8px;
          font-family: PingFangSC-Semibold;
          font-size: 14px;
          color: #e93b3b;
          line-height: 14px;
          del {
            font-family: PingFangSC-Regular;
            font-size: 10px;
            color: #999999;
            line-height: 20px;
          }
        } //操作购物车
        .count {
          position: absolute;
          right: 0px;
          bottom: 15px;
          .sub {
            display: inline-block; //background: #666666;
            color: #666666;
            border: 1px solid #666666;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            font-size: 14px;
            text-align: center;
            line-height: 20px;
          }
          .number {
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #333333;
            line-height: 16px;
            margin: 0px 5px;
          }
          .add {
            display: inline-block; //background: #666666;
            color: white;
            background-color: #0091ff;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            font-size: 14px;
            text-align: center;
            line-height: 20px;
          }
        }
      }
    }
  }
}
</style>